<template>
  <div class="RoleAdmin">
    <a-card class="tables">
      <router-link to="/goodsNew1">
        <a-button type="primary" icon="plus">新建</a-button>
      </router-link>
      <a-table class="table" :columns="columns" :dataSource="data">
        <span slot="customTitle"></span>
        <span slot="tags" slot-scope="tags">
          <a-tag v-for="tag in tags" color="blue" :key="tag">{{tag}}</a-tag>
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import leftmenu from "../../components/Leftmenu";
const columns = [
  {
    title: "用户名",
    dataIndex: "userName",
    scopedSlots: { customRender: "userName" },
    align: "center",
  },
  {
    title: "姓名",
    dataIndex: "name",
    scopedSlots: { customRender: "name" },
    align: "center",
  },
  {
    title: "手机号",
    dataIndex: "phone",
    scopedSlots: { customRender: "phone" },
    align: "center",
  },
  {
    title: "用户角色",
    dataIndex: "userRole",
    scopedSlots: { customRender: "userRole" },
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" },
    align: "center",
  },
  {
    title: "最近登陆时间",
    dataIndex: "latelyTime",
    scopedSlots: { customRender: "latelyTime" },
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operate" },
    align: "center",
  }
];
const data = [
  {
    key: "1",
    userName: "1234",
    name: "口水娃玉米味烤肠袋装50g",
    phone: "",
    userRole: "1",
    status: "",
    latelyTime: "",
    operate: ["编辑", "上架"]
  }
];
export default {
  name: "RoleAdmin",
  data() {
    return {
      data,
      columns,
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
      }
    };
  },
  components: {
    leftmenu
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.RoleAdmin {
  width: 1250px;
}
.ant-card {
  width: 100%;
  height: 130px;
}
.tables {
  margin-top: 30px;
  height: 500px;
}
.table {
  margin-top: 20px;
}
</style>
